草庐IT

HTML5 SVG

全部标签

javascript - 使用绑定(bind)将 Angular 组件编译为 HTML

我需要为我的map标记气球正文提供一个可靠的HTML字符串。我想让气球成为一个Angular组件,并使用绑定(bind)和内置指令(*ngFor、*ngIf等)。所以我正在寻找一种方法来评估组件模板中的所有绑定(bind)并将结果编译为字符串...如何实现这个或者如果这个方法是非Angular——推荐的模式是什么?//Componentimport{Component}from'@angular2/core';import{AnyThing}from'./somewhere/in/my/app/anything.model.ts';@Component({selector:'my-ba

javascript - 我如何实际显示 Workbox 中更新的 index.html?

我有一个完全静态的网站-index.html和一些CSS/JS/PNG文件。我想使用服务worker来缓存所有这些。似乎Workbox应该使这变得容易。这是我的sw.js:importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js');workbox.precaching.precacheAndRoute([]);workbox.routing.registerNavigationRoute('/index.html');这是我的构建脚本:constworkboxBuild

javascript - react-native-svg 中 <Rect/> 的动画宽度

我为进行了简单的动画插值元素,但是我在我的用户界面上没有看到任何变化,就好像宽度保持为0。我手动将我的最终值添加到组件中作为width={149.12}并且显示正确,因此我现在有点困惑为什么它没有从动画中获取相同的值?react-native@0.57.1​​react-native-svg@7.03针对iOS12这是完整的实现,本质上是一个包含当前值和总值的法力和健康条,即50和100应该显示矩形的一半宽度。(示例使用typescript,但如果需要,答案可以用纯js编写)import*asReactfrom'react'import{Animated}from'react-nati

javascript - SVG 捕获鼠标坐标

我知道之前有人在这里问过关于svg鼠标坐标的问题,但我对我目前遇到的行为感到很困惑,似乎没有一个线程能完全解决它。我用来捕捉坐标的方法:varpt=svg.createSVGPoint();//Createdoncefordocumentfunctionalert_coords(evt){pt.x=evt.clientX;pt.y=evt.clientY;//Thecursorpoint,translatedintosvgcoordinatesvarcursorpt=pt.matrixTransform(svg.getScreenCTM().inverse());console.log

javascript - 响应式或流畅布局的跨浏览器 SVG?

我选择使用Raphaëljavascript库以获得广泛的浏览器支持,但我无法让SVG在除Chrome和Firefox之外的任何浏览器中正确显示。我已经为此绞尽脑汁一段时间了,很想听听如何让SVG在响应式布局中工作。Chrome和Firefox完全按照我的意愿显示SVG。它统一缩放,保持正确的纵横比和给定宽度的父级百分比。InternetExplorer保持正确的宽高比,但不能与其父级一起正确缩放。Safari在宽度上与其父级正确缩放,但在高度上不行。相对于父容器的高度以某种方式设置为100%。Javascriptvarmenu=Raphael('menu','100%','100%'

javascript - 适用于 ASP.NET MVC 和浏览器的 HTML 模板解决方案?

我正在尝试寻找一种HTML模板解决方案,它既适用于我的ASP.NETMVC应用程序(.NET4、IIS7.5),也适用于浏览器。原因是使用相同的代码在服务器(性能、输出到移动设备等)或浏览器(通过AJAX刷新数据)上呈现HTML。这不是一个新问题,但我想知道当前的技术趋势是否改变了答案。我正在考虑的几个想法:使用mustache两者都可用的模板JavaScript和.NET.使用RazorViewEngine的一个端口来Javascript+Razor==Jazor?中考虑的JavaScript.采取类似MicroTemplatesAreDead...forgetaboutit的立场和

javascript - 什么是 replaceAll 性能 secret ? [HTML 转义]

我花了一些时间寻找转义html字符串的最佳方法,并找到了一些相关讨论:discussion1discussion2.它引导我到replaceAll功能。然后我做了性能测试并试图找到实现类似速度但没有成功的解决方案:(这是我的决赛testcaseset.我在网上找到它并尝试扩展(底部有4个案例),但仍然无法达到replaceAll()性能。是什么secret使replaceAll()解决方案如此快速?您好!代码片段:String.prototype.replaceAll=function(str1,str2,ignore){returnthis.replace(newRegExp(str

javascript - DOM 文本节点是否保证不会被解释为 HTML?

有谁知道Text类型的DOMNode是否保证不会被浏览器解释为HTML?更多详细信息如下。背景我正在为一个friend构建一个简单的网络评论系统,我一直在思考XSS攻击。我不认为过滤或转义HTML标签是一个非常优雅的解决方案——想出一个可以绕过过滤器的卷积太容易了。根本问题是,我想保证,对于某些内容(即随机未经身份验证的网络用户发布的内容),浏览器从不尝试解释或运行该内容。一个普通的(文本)开始首先想到的是使用Content-Type:text/plain,但这必须应用于整个页面。您可以将纯文本IFRAME放在页面中间,但这很丑陋,并且如果用户点击进入框架,它会产生焦点问题。inner

javascript - Raphael 沿着路径的 SVG 动画

我有一个关于SVG动画的有趣问题。我正在使用Raphael沿着圆形路径制作动画obj=canvas.circle(x,y,size);path=canvas.circlePath(x,y,radius);path=canvas.path(path);//generatepathfrompathvaluestringobj.animateAlong(path,rate,false);circlePath方法是我自己创建的,用于生成SVG路径符号中的圆路径:Raphael.fn.circlePath=function(x,y,r){vars="M"+x+","+(y-r)+"A"+r+",

javascript - Visual Studio 中的 HTML5 Javascript API Intellisense 支持

我开始玩HTML5/CSS3和新的JavaScriptAPI我在VS2010中注意到它不支持新的JavaScriptAPI我想知道我是否可以做些什么所以在Vs2010中,如果我输入:varcanvas=document.getElementById('diagonal');varcontext=canvas.getContext('2d');我没有得到“getContext”方法等的任何智能感知。我不想编写代码并编译并祈祷它能工作。知道如何为新的javascript启用智能感知吗? 最佳答案 VisualStudio2010Canv